day 10 javascript行動支付手機網頁程式管理系統

2024 iThome 鐵人賽

DAY 10

JavaScript

Javascript網頁程式管理系統系列第 10 篇

16th鐵人賽

neilsu02

2024-09-11 22:34:22

65 瀏覽

分享至

今天是第十天我們可以寫一個javascript行動支付手機網頁程式管理系統，以下是我的程式碼

1. 設計頁面架構（HTML）

首先，我們可以設計一個簡單的 HTML 架構，包含付款方式的顯示與管理功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行動支付管理系統</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>行動支付管理系統</h1>

        <div id="paymentMethodsContainer">
            <h2>付款方式列表</h2>
            <ul id="paymentMethodsList"></ul>
        </div>

        <div id="paymentForm">
            <h2>新增付款方式</h2>
            <label for="paymentName">名稱：</label>
            <input type="text" id="paymentName" placeholder="輸入支付方式名稱">

            <label for="paymentType">類型：</label>
            <select id="paymentType">
                <option value="信用卡">信用卡</option>
                <option value="電子錢包">電子錢包</option>
                <option value="銀行轉帳">銀行轉帳</option>
            </select>

            <button onclick="addPaymentMethod()">新增付款方式</button>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

2. 設計樣式（CSS）

接著，我們設計一些基本的樣式，讓網頁看起來更美觀。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    text-align: center;
}

#paymentForm {
    margin-top: 20px;
}

label {
    display: block;
    margin-top: 10px;
}

input, select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

button {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background-color: #f9f9f9;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button.delete-btn {
    background-color: red;
    color: white;
    padding: 5px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button.delete-btn:hover {
    background-color: darkred;
}

3. 功能邏輯（JavaScript）

最後，我們使用 JavaScript 來管理新增和刪除付款方式的邏輯。

// app.js

let paymentMethods = [];

function addPaymentMethod() {
    const paymentName = document.getElementById('paymentName').value;
    const paymentType = document.getElementById('paymentType').value;

    if (paymentName === '') {
        alert('請輸入支付方式名稱');
        return;
    }

    const paymentMethod = {
        name: paymentName,
        type: paymentType
    };

    paymentMethods.push(paymentMethod);
    displayPaymentMethods();

    // 清空輸入框
    document.getElementById('paymentName').value = '';
}

function displayPaymentMethods() {
    const paymentMethodsList = document.getElementById('paymentMethodsList');
    paymentMethodsList.innerHTML = '';

    paymentMethods.forEach((method, index) => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `${method.name} (${method.type}) 
            <button class="delete-btn" onclick="deletePaymentMethod(${index})">刪除</button>`;
        paymentMethodsList.appendChild(listItem);
    });
}

function deletePaymentMethod(index) {
    paymentMethods.splice(index, 1);
    displayPaymentMethods();
}

功能說明：

新增付款方式：使用者可以在輸入框中輸入支付方式名稱，選擇支付方式的類型（如信用卡、電子錢包、銀行轉帳），點擊「新增付款方式」按鈕後，將新付款方式添加到列表中。
刪除付款方式：每個新增的付款方式會在列表中顯示，並且會有一個「刪除」按鈕，點擊按鈕後可以從列表中移除該支付方式。

我會以js為主要介紹程式的功能

1. 定義變數 `paymentMethods`

let paymentMethods = [];

這行程式碼定義了一個空陣列 paymentMethods，用來存放所有新增的付款方式資料。每當使用者新增一個付款方式時，我們會將其添加到這個陣列中。

2. 函數 `addPaymentMethod`

function addPaymentMethod() {
    const paymentName = document.getElementById('paymentName').value;
    const paymentType = document.getElementById('paymentType').value;

    if (paymentName === '') {
        alert('請輸入支付方式名稱');
        return;
    }

    const paymentMethod = {
        name: paymentName,
        type: paymentType
    };

    paymentMethods.push(paymentMethod);
    displayPaymentMethods();

    document.getElementById('paymentName').value = '';
}

這是用來新增付款方式的函數，具體邏輯如下：

取得輸入值：
```
const paymentName = document.getElementById('paymentName').value;
const paymentType = document.getElementById('paymentType').value;
```
透過 document.getElementById() 方法，取得使用者在輸入框 paymentName 和選擇框 paymentType 中輸入的值。
檢查輸入是否有效：
```
if (paymentName === '') {
    alert('請輸入支付方式名稱');
    return;
}
```
如果使用者沒有輸入付款方式名稱，則彈出一個警示框提醒使用者，並透過 return 停止執行後續程式。
建立付款方式物件：
```
const paymentMethod = {
    name: paymentName,
    type: paymentType
};
```
這裡建立了一個物件 paymentMethod，它包含兩個屬性：
- name: 使用者輸入的付款方式名稱
- type: 使用者選擇的付款方式類型（如信用卡、電子錢包等）
新增付款方式到陣列：
```
paymentMethods.push(paymentMethod);
```
使用 push() 方法，將剛建立的 paymentMethod 物件添加到先前定義的 paymentMethods 陣列中。
更新付款方式列表：
```
displayPaymentMethods();
```
每次新增付款方式後，呼叫 displayPaymentMethods() 函數來更新並顯示目前的付款方式列表。
清空輸入框：
```
document.getElementById('paymentName').value = '';
```
新增付款方式後，將 paymentName 輸入框的值清空，方便使用者輸入下一個支付方式。

3. 函數 `displayPaymentMethods`

function displayPaymentMethods() {
    const paymentMethodsList = document.getElementById('paymentMethodsList');
    paymentMethodsList.innerHTML = '';

    paymentMethods.forEach((method, index) => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `${method.name} (${method.type}) 
            <button class="delete-btn" onclick="deletePaymentMethod(${index})">刪除</button>`;
        paymentMethodsList.appendChild(listItem);
    });
}

這個函數負責顯示已新增的所有付款方式，具體步驟如下：

取得付款方式列表元素：
```
const paymentMethodsList = document.getElementById('paymentMethodsList');
paymentMethodsList.innerHTML = '';
```
使用 getElementById() 取得 HTML 中的 ul 元素來顯示付款方式列表。每次呼叫 displayPaymentMethods() 時，先將列表清空（將 innerHTML 設為空字串）。
迭代 paymentMethods 陣列：
```
paymentMethods.forEach((method, index) => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `${method.name} (${method.type}) 
        <button class="delete-btn" onclick="deletePaymentMethod(${index})">刪除</button>`;
    paymentMethodsList.appendChild(listItem);
});
```
這段程式碼使用 forEach() 方法迭代 paymentMethods 陣列中的每一個付款方式物件，並動態創建 li 元素來顯示每個付款方式。listItem.innerHTML 中插入付款方式的名稱和類型，並附加一個刪除按鈕。

刪除按鈕設定了 onclick="deletePaymentMethod(${index})"，當按下時會呼叫 deletePaymentMethod 函數，並將該項目的索引傳遞給它。
添加至列表：
```
paymentMethodsList.appendChild(listItem);
```
使用 appendChild() 方法，將動態創建的 li 元素附加到付款方式的列表中。

4. 函數 `deletePaymentMethod`

function deletePaymentMethod(index) {
    paymentMethods.splice(index, 1);
    displayPaymentMethods();
}

這個函數負責刪除付款方式：

刪除指定索引的付款方式：
```
paymentMethods.splice(index, 1);
```
使用 splice() 方法，從 paymentMethods 陣列中刪除指定索引 index 對應的付款方式。
更新顯示列表：
```
displayPaymentMethods();
```
刪除後再一次呼叫 displayPaymentMethods()，以更新付款方式列表。